<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<link rel="stylesheet" media="screen" href="css/docs.css" />
<link rel="stylesheet" media="screen"
	href="lib/jqplot/jquery.jqplot.min.css" />
<!-- jQplot SETUP -->
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/jqplot/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="lib/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript"
	src="lib/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript"
	src="lib/jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript"
	src="lib/jqplot/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript"
	src="lib/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript"
	src="lib/jqplot/plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript"
	src="lib/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript"
	src="lib/jqplot/plugins/jqplot.donutRenderer.min.js"></script>
<script type="text/javascript"
	src="lib/jqplot/plugins/jqplot.bubbleRenderer.min.js"></script>
<link rel="stylesheet" media="screen" href="lib/datatables/css/vpad.css" />
<script type="text/javascript"
	src="lib/datatables/js/jquery.dataTables.js"></script>


<script type="text/javascript">
var profits;
var tickslabel;
function loadChartImage(title,value) {
	/* 	var profits = [ 87.65, 98.40, 65.39, 93.20, 78.00, 67.98,
				78.45, 89.56, 87.10, 69.56, 96.20, 100 ];
		var tickslabel = [ '一月', '二月', '三月', '四月', '五月', '六月', '七月',
				'八月', '九月', '十月', '十一月', '十二月' ]; */
		profits = value;
	   	tickslabel = title;
		var ylabel = [ 'Profits' ];

		//line with some options
		var chart2 = $.jqplot('chart2', [ profits ], {
			title : '考核历史数据',
			legend : {
				show : true,
				labels : [ '定性考核' ],
				location : 'ne'
			},
			axes : {
				xaxis : {
					renderer : $.jqplot.CategoryAxisRenderer,
					ticks : tickslabel
				},
				yaxis : {
					tickOptions : {
						formatString : '%.2f 分'
					}
				}
			},
			highlighter : {
				show : true,
				sizeAdjust : 7.5,
				tooltipAxes : 'y'
			},
			cursor : {
				show : false
			}
		});

	}
		
	function loadScoreLine(showType){
		$.ajax({
	        type:"get",
	        url:"/ajax/qualscore_list.xhtml?periodEnum=${type}&workId=${workId}&showYearlyEnum=" + showType,
	        //data: "name=John&location=Boston",
	        dataType:"json",
	        success:function (data) {
	        	if(data != null){
	        		$("#chart2").html("");
	        		loadChartImage(data.title,data.value);
	        	}
	        }
	    });
	}
	
	function loadExamHistoryQualScore(year,month){
		$.ajax({
	        type:"get",
	        url:"/exam/qual_score_browse_item_detail.xhtml?type=${type}&workId=${workId}&y=" + year + "&m=" + month,
	        //data: "name=John&location=Boston",
	        type:"POST",
            dataType:"html",
            cache:false,
	        success:function (data) {
        		var obj = $("#list_item_content");
       		 	obj.html(data);
	        }
	    }); 
	}
	
	$(document).ready(function(){
		loadScoreLine("present_year");
		<s:if test="#request.examPeriod != null">
			loadExamHistoryQualScore(${examPeriod.examYear},${examPeriod.examMonthly});
		</s:if>
	});
	
	var cmonthly = [1,2,3,4,5,6,7,8,9,10,11,12];
	var csimonthly = [2,4,6,8,10,12];
	var cseason = [3,6,9,12];
	var chalfyear = [6,12];
    function tooltip_callback(score, index){
    	var currentyear = eval("${examPeriod.examYear}");
    	var year,month;
    	var showtype = $("#form-timezone").val();
    	if(showtype == "all"){
    		var tips = tickslabel[index];
    		try{
    			year = parseInt(tips.substring(0,tips.indexOf("年")).replace(",",""));
    			month = parseInt(tips.substring(tips.indexOf("年") + 1,tips.indexOf("月")));
    			loadExamHistoryQualScore(year,month);
    		}catch(error){
    			
    		}
    	}else{
    		if(showtype == "present_year"){
        		year = currentyear;
    		}else{
    			year = currentyear - 1;
    		}
	        var type = "${type}";
	        if(type == "monthly"){
	        	month = cmonthly[index];
	        }else if(type == "bimonthly"){
	        	month = csimonthly[index];
	        }else if(type == "season"){
	        	month = cseason[index];
	        }else if(type == "semiyearly"){
	        	month = chalfyear[index];
	        }else if(type == "annually"){
	        	month = 12;
	        }
	        loadExamHistoryQualScore(year,month);
    	}
    }
</script>
<s:if test="#request.examPeriod != null">

</s:if>
<!-- jQplot SETUP END -->
<h1 class="page-title">定性考核-考核历史浏览-查看全年分数</h1>
<div class="container_12 clearfix">
	<section class="portlet grid_12 leading docs">
		<header>
			<h2>定性考核打分</h2>
		</header>
		<section>

			<DIV class="portlet">
				<header>
					<h5_n>${employeeinfoWork.baseId.name}</h5_n>
					<h2>
						<s:if test="#request.employeeinfoWork.baseId.sex == \"0\"">先生</s:if>
						<s:else>女士</s:else>
					</h2>
				</header>
				<section class="clearfix">


					<div class="grid_2 alpha" style="text-align: center">
						<img src="${employeeinfoWork.baseId.facePath}" width="120"
							height="135" onerror="this.src='${ctx}/images/Avatar.jpg'" />

					</div>
					<div class="grid_3">
						<dl>
							<dt>岗位</dt>
							<dd>
								<h6>${employeeinfoWork.duty.dutyName}</h6>
							</dd>
							<dt>员工号</dt>
							<dd>
								<h6>${employeeinfoWork.workNo}</h6>
							</dd>
							<dt>职等</dt>
							<dd>
								<h6>${employeeinfoWork.grade.gradeName}</h6>
							</dd>
						</dl>
					</div>
					<div class="grid_3">
						<dl>
							<dt>部门</dt>
							<dd>
								<h6>${employeeinfoWork.organization.fullName}</h6>
							</dd>
							<dt>职务</dt>
							<dd>
								<h6>${employeeinfoWork.duty.dutyName}</h6>
							</dd>
							<dt>职级</dt>
							<dd>
								<h6>${employeeinfoWork.gradeLevel.gradeSort}</h6>
							</dd>
						</dl>
					</div>
					<div class="grid_3 omega">
						<dl>
							<dt>工龄</dt>
							<dd>
								<h6>${employeeinfoWork.workAge}</h6>
							</dd>
							<dt>考核记录</dt>
							<dd>
								<h6>92分</h6>
								<select id="form-timezone" style="opacity: 0;"
									onchange="loadScoreLine(this.value)">
									<option value="present_year">显示本年度</option>
									<option value="last_year">显示上年度</option>
									<option value="all">显示全部</option>
								</select>
							</dd>

						</dl>
					</div>


				</section>
			</DIV>

			<div class="leading">
				<div class="jqPlot" id="chart2" style="width: 100%; height: 200px;"></div>
			</div>
			<div class="clear"></div>
			<div class="leading" id="list_item_content">
				
			</div>
			<h4>&nbsp;</h4>
		</section>
	</section>
</div>